<template>
    <div class="plonebox">
        <div class="ploneleft">
            <div class="plimg">
                <img v-lazy="mysrc" alt="">
            </div>
        </div>
        <div class="ploneright">
            <div class="plonename">{{myname}}</div>
            <div class="plonecon">{{mycontent}}</div>
            <div class="plonehf" v-show="mynum!==0" @click="showPopup()">{{mynum}}条回复</div>
        </div>
        <div class="plonehot">
            {{myhot}}
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-icon2"></use>
            </svg>
        </div>
        <van-popup v-model="show" position="bottom" round :style="{ height: '80%' }" get-container="#app" class="mysmall" ref="ulaaa">
            <div class="allhuifu" v-show="quanhuifu">
                <div class="allpltop">回复({{mynum}})</div>
                <div class="toppl">
                    <smallpl v-bind:thesrc="mysrc" v-bind:thename="myname" v-bind:thecontent="mycontent" v-bind:thehot="myhot"></smallpl>
                </div>
                <div class="abhf">全部回复</div>
                <ul class="otherhf">
                    <li v-for="(item,index) in nowarr" :key="index">
                        <smallpl v-bind:thesrc="item.src" v-bind:thename="item.name" v-bind:thecontent="item.content" v-bind:thehot="item.hot"></smallpl>
                    </li>
                    <li class="downjz" @click="getdata" v-show="downjz">
                        {{jzz==true?"正在加载中~":"点击加载更多"}}
                    </li>
                </ul>
            </div>
            <loading v-show="!quanhuifu"></loading>
        </van-popup>
    </div>
</template>
<script>
import loading from "./loading.vue"
import smallpl from "./smallpl.vue"
export default {
    name:"plone",
    props:['mysrc','myname','myid','mycontent','myhot','mynum',"myplid"],
    data(){
        return {
            show:false,
            quanhuifu:false,
            nowarr:[],
            downjz:true,
            hfzs:0,
            jzz:false,
        }
    },
    components:{
        loading,
        smallpl
    },
    methods:{
        showPopup(){
            this.show = true;
            this.getdata()
        },
        getdata(){
            this.nowarr[0]!=undefined?this.jzz=false:this.jzz=true
            axios.get(`https://apis.netstart.cn/music/comment/floor?parentCommentId=${this.myid}&id=${this.myplid}&type=0&time=${this.nowarr[0]!=undefined?this.nowarr[this.nowarr.length-1].time:0}`).then(
                res=>{
                    // console.log(res)
                    let pl = res.data.data.comments
                    this.hfzs = res.data.data.totalCount
                    for(let i = 0;i<pl.length;i++){
                        let obj = {}
                        obj.name = pl[i].user.nickname
                        obj.src = pl[i].user.avatarUrl
                        obj.content = pl[i].content
                        obj.hot = pl[i].likedCount
                        obj.time = pl[i].time
                        this.nowarr.push(obj)
                    }
                    if(this.mynum == this.nowarr.length){
                        this.downjz = false
                    }
                    this.jzz=false
                    this.quanhuifu = true
                },
                err=>{
                    console.log(err)
                }
            )
        },
    }
}
</script>
<style lang="less" scoped>
.plonebox{
    width: 100%;
    display:flex;
    position:relative;
    &::-webkit-scrollbar { width: 0 !important }
    .ploneleft{
        width:12%;
        flex-shrink: 0;
        .plimg{
            font-size:0px;
            border-radius:50%;
            overflow:hidden;
            img{
                width:100%;
            }
        }
    }
    .ploneright{
        margin-left:10px;
        width:80%;
        border-bottom:1px solid #eee;
        .plonename{
            margin-top:8px;
            margin-bottom:10px;
            width:75%;
            color:#555;
            font-size:15px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .plonecon{
            line-height:26px;
            letter-spacing:1px;
            margin-bottom: 5px;
        }
        .plonehf{
            // margin:8px 0px;
            color:#4475b7;
            font-size:14px;
            line-height:20px;
            margin-bottom:7px;
        }
    }
    .plonehot{
        position:absolute;
        top:8px;
        right:0px;
        font-size:15px;
        color:#999;
        svg{
            font-size:18px;
        }
    }
}
.zxpl{
    font-size: 20px;
    margin-bottom: 20px;
    margin-top: 20px;
    font-weight: 500;
}
.allhuifu{
    width:90%;
    margin:0 auto;
    &::-webkit-scrollbar { width: 0 !important }
    .allpltop{
        line-height: 50px;
        font-size: 20px;
        text-align: center;
    }
    .abhf{
        line-height: 30px;
        font-size: 20px;
        margin-top: 15px;
        margin-bottom: 15px;
    }
}
.otherhf{
    li{
        margin-bottom:15px;
    }
    .downjz{
        width:100%;
        text-align: center;
    }
}
.mysmall{
    &::-webkit-scrollbar { width: 0 !important }
}
</style>